<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能编译与MCP：重塑代码世界的革新引擎</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism-tomorrow.min.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav id="navbar">
        <div class="container">
            <div class="logo">
                <h1>智能编译与MCP</h1>
                <p>重塑代码世界的革新引擎</p>            </div>
            <div class="nav-links">
                <a href="#ai-concepts" class="nav-link">快速了解</a>
                <a href="#definition" class="nav-link">tools发展史</a>
                <a href="#mechanism" class="nav-link">核心机制</a>
                <a href="#tools" class="nav-link">开发者工具</a>
                <a href="#practical" class="nav-link">实战动手</a>
            </div>
            <div class="menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>

    <!-- 侧边导航 -->
    <div class="side-nav">
        <a href="#hero" class="side-dot" data-section="hero"></a>
        <a href="#ai-concepts" class="side-dot" data-section="ai-concepts"></a>
        <a href="#definition" class="side-dot" data-section="definition"></a>
        <a href="#mechanism" class="side-dot" data-section="mechanism"></a>
        <a href="#tools" class="side-dot" data-section="tools"></a>
        <a href="#practical" class="side-dot" data-section="practical"></a>
    </div>

    <!-- 主内容区 -->
    <main>
        <!-- 封面页 -->
        <section id="hero" class="section">
            <div class="hero-bg"></div>
            <div class="container">
                <h1 class="hero-title">智能编译与 <span>MCP</span></h1>
                <h2 class="hero-subtitle">重塑代码世界的革新引擎</h2>
                
                <!-- 自我介绍模块 -->
                <div class="author-intro">
                    <div class="author-card">
                        <div class="author-avatar">
                            <div class="avatar-placeholder">
                                <svg width="40" height="40" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <circle cx="12" cy="7" r="4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </div>
                        </div>
                        <div class="author-info">
                            <h3 class="author-name">万明宇</h3>
                            <p class="author-title">金融科技中心-机构生态平台</p>
                            <div class="author-tags">
                                <span class="tag">Java研发工程师</span>
                            </div>
                            <p class="author-desc">
                                23年初接触AI并自研商业版私有化部署GeniusAI和Nova-AI，私有化部署400+客户。对AI应用开发及前沿技术有浓厚兴趣。
                            </p>
                        </div>
                    </div>
                </div>
                
                <a href="#ai-concepts" class="hero-btn">开始探索</a>
                <div class="scroll-indicator">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M19 14l-7 7m0 0l-7-7m7 7V3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    </svg>
                </div>
            </div>
        </section>

        <!-- AI Agent 与 Function Call/Tools 概念 -->
        <section id="ai-concepts" class="section">
            <div class="container">
                <div class="section-header">
                    <h2>快速了解</h2>
                    <div class="section-divider"></div>
                </div>
                
                <div class="concept-block">
                    <div class="concept-header">
                        <span class="concept-number">01</span>
                        <h3>定义与起源</h3>
                    </div>
                    <p>模型上下文协议（<a href="https://modelcontextprotocol.io/">MCP</a>）是<a href="https://www.anthropic.com/">Anthropic</a>于2024年11月所推动的一项开放标准，目的是为大型语言模型应用提供一个标准化接口，使其能够连接外部数据源和工具，并与其交互。</p>
                </div>
                
                <div class="concept-block">
                    <div class="concept-header">
                        <span class="concept-number">02</span>
                        <h3>简单理解</h3>
                    </div>
                    <p>把MCP理解成像是一个AI世界的通用翻译官，让AI模型能够与各种各样的外部工具"对话"。它建立了一种标准化的通信方式，使不同的AI模型和工具能够无缝协作。</p>
                </div>
                
                <div class="concept-block">
                    <div class="concept-header">
                        <span class="concept-number">03</span>
                        <h3>技术实现</h3>
                    </div>
                    <p>模型上下文协议的技术实现旨在为大型语言模型应用与外部数据源和工具之间的无缝集成提供标准化的方法。协议基于<a href="https://www.jsonrpc.org/specification">JSON-RPC 2.0</a>消息格式，建立状态连接，并支持服务器和客户端的能力协商。</p>
                </div>
                
                <div class="concept-features">
                    <div class="feature-item">
                        <div class="feature-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M9 12l2 2 4-4M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h4>统一标准</h4>
                        <p>提供跨平台、跨模型的统一接口标准，降低开发和集成成本</p>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13 10V3L4 14h7v7l9-11h-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h4>高效交互</h4>
                        <p>优化模型与工具间的通信效率，减少延迟和资源消耗</p>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h4>安全可控</h4>
                        <p>内置权限管理和安全机制，确保工具调用的安全性和可控性</p>
                    </div>
                    
                    <div class="feature-item">
                        <div class="feature-icon">
                            <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                        </div>
                        <h4>易于扩展</h4>
                        <p>模块化设计使开发者能够轻松添加新工具和功能，适应不断变化的需求</p>
                    </div>
                </div>
            </div>
        </section>


        <!-- 大模型工具的发展史 -->
        <section id="definition" class="section">
             <div class="container">
                <div class="section-header">
                    <h2>大模型工具的发展史</h2>
                    <div class="section-divider"></div>
                </div>
                <div class="cards-container">
                    <div class="card-wrapper">
                        <div class="flip-card">
                        <div class="flip-card-inner">
                            <div class="flip-card-front">
                                <h3>1.0 时代：提示词驱动的工具调用</h3>
                                <div class="card-icon">
                                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                                <div class="card-hint"></div>
                            </div>
                            <div class="flip-card-back">
                                <h3>1.0时代</h3>
                                <p>通过自然语言提示词（Prompt）引导大模型调用工具。</p>

                                <p>工具调用依赖模型对语言的理解，缺乏标准化和稳定性。</p>

                                <p>不可控性高：返回结果格式不稳定，难以解析和复用。</p>
                                <div class="back-hint"></div>

                            </div>
                        </div>
                        </div>
                        <div class="image-container">
                            <img src="images/no_mcp.png" alt="1.0时代示例图片" class="card-image">
                        </div>
                    </div>
                    <div class="card-wrapper">
                        <div class="flip-card">
                        <div class="flip-card-inner">
                            <div class="flip-card-front">
                                <h3>2.0 时代：Function Calling 标准化调用</h3>
                                <div class="card-icon">
                                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                                <div class="card-hint"></div>
                            </div>
                            <div class="flip-card-back">
                                <h3>2.0 时代：Function Calling 标准化调用</h3>
                                <p>自动进行格式校验和纠错重试，提升可靠性。</p>
                                <p>减少对 token 的浪费，降低调用成本。</p>
                                <p>提高开发效率，便于集成和调试。</p>
                                <div class="back-hint"></div>

                            </div>
                        </div>
                        </div>
                        <div class="image-container">
                            <img src="images/image1.png" alt="2.0时代示例图片" class="card-image">
                        </div>
                    </div>
                    <div class="card-wrapper">
                        <div class="flip-card">
                        <div class="flip-card-inner">
                            <div class="flip-card-front">
                                <h3>3.0 时代：MCP 的出现 多厂商、多工具统一 </h3>
                                <div class="card-icon">
                                    <svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                        <path d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                                <div class="card-hint"></div>
                            </div>
                            <div class="flip-card-back">
                                <h3>3.0 时代：MCP 的出现 多厂商、多工具统一</h3>
                                <p>各厂商 Function Calling 接口不统一，集成成本高。</p>
                                <p>相同工具在不同平台重复开发，缺乏复用机制。</p>
                                <div class="back-hint"></div>

                            </div>
                        </div>
                        </div>
                        <div class="image-container">
                            <img src="images/WX20250630-135410@2x.png" alt="3.0时代示例图片" class="card-image">
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- MCP核心机制 -->
        <section id="mechanism" class="section">
            <div class="container">
                <div class="section-header">
                    <h2>MCP核心机制</h2>
                    <div class="section-divider"></div>
                </div>

                <!-- Host-Client-Server架构 -->
                <div class="mechanism-block">
                    <h3 class="mechanism-title">Host-Client-Server架构</h3>
                    <div class="mechanism-content">
                        <div class="mechanism-text">
                            <p>MCP采用了灵活而强大的Host-Client-Server架构，这种三层架构设计为智能编译提供了坚实的基础，同时确保了系统的可扩展性和安全性。</p>
                            <div class="architecture-boxes">
                                <div class="architecture-box">
                                    <h4>Host层</h4>
                                    <p>如 Claude Desktop、IDE 或 AI 工具，希望通过 MCP 访问数据的程序</p>
                                </div>
                                <div class="architecture-box">
                                    <h4>Client层</h4>
                                    <p>维护与服务器一对一连接的协议客户端</p>
                                </div>
                                <div class="architecture-box">
                                    <h4>Server层</h4>
                                    <p>轻量级程序，通过标准的 Model Context Protocol 提供特定能力</p>
                                </div>
                            </div>
                        </div>
                        <div class="mechanism-image">
                            <img src="images/image.png" alt="相关图片1" class="img-shadow additional-image">
                             <img src="images/mcp001.png" alt="MCP Host-Client-Server架构" class="img-shadow">
                        </div>
                    </div>
                </div>

                <!-- MCP的工作原理 -->
                <div class="mechanism-block">
                    <h3 class="mechanism-title">MCP的工作原理</h3>
                    <div class="mechanism-content reverse">
                        <div class="mechanism-image">
<!--                            <img src="images/image1.png" alt="相关图片2" class="img-shadow additional-image">-->
                            <img src="images/mcp_workflow_diagram.jpeg" alt="MCP工作原理流程图" class="img-shadow">
                        </div>
                        <div class="mechanism-text">
                            <p>MCP作为一个开放的通信协议，定义了AI应用（Host）、MCP客户端（Client）和外部工具服务（Server）之间的标准化交互方式。</p>
                            <div class="workflow-steps">
                                <div class="workflow-step">
                                    <h4>协议握手</h4>
                                    <p>Client与Server建立连接，交换协议版本信息和能力声明，确保双方兼容性。</p>
                                </div>
                                <div class="workflow-step">
                                    <h4>资源发现</h4>
                                    <p>Client查询Server提供的工具列表、资源类型和可用功能，建立完整的能力映射。</p>
                                </div>
                                <div class="workflow-step">
                                    <h4>工具调用</h4>
                                    <p>Host通过Client发送标准化的工具调用请求，Server执行相应操作并返回结构化结果。</p>
                                </div>
                                <div class="workflow-step">
                                    <h4>上下文管理</h4>
                                    <p>协议支持会话状态维护和上下文传递，确保多轮交互的连贯性和数据一致性。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 开发者工具生态 -->
        <section id="tools" class="section">
            <div class="container">
                <div class="section-header">
                    <h2>开发者工具生态</h2>
                    <div class="section-divider"></div>
                </div>

                <!-- 主流IDE与工作流集成 -->
                <div class="tools-block">
                    <h3 class="tools-title">主流IDE与工作流集成</h3>
                    <p class="tools-intro">MCP协议的一个重要优势是其与现代开发环境的无缝集成能力。通过与主流IDE和开发工具的深度整合，MCP为开发者提供了自然且高效的AI辅助编程体验。</p>

                    <div class="ide-cards">
                        <!-- VS Code集成 -->
                        <div class="ide-card">
                            <div class="ide-header">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="ide-logo">
                                    <path d="M17.5 0L6.5 0C2.91 0 0 2.91 0 6.5v11C0 21.09 2.91 24 6.5 24h11c3.59 0 6.5-2.91 6.5-6.5v-11C24 2.91 21.09 0 17.5 0z" fill="#007ACC"/>
                                    <path d="M17.5 2.5L6.5 2.5C4.29 2.5 2.5 4.29 2.5 6.5v11c0 2.21 1.79 4 4 4h11c2.21 0 4-1.79 4-4v-11c0-2.21-1.79-4-4-4z" fill="#007ACC"/>
                                    <path d="M18.5 5.5L12 12l6.5 6.5V5.5z" fill="white"/>
                                    <path d="M5.5 8.5L12 12l-6.5 3.5V8.5z" fill="white"/>
                                </svg>
                                <h4>Visual Studio Code</h4>
                            </div>
                            <p class="ide-description">通过官方MCP扩展，VS Code提供完整的AI辅助编程体验，支持智能代码补全、重构建议和实时错误检测。</p>
                        </div>
                        
                        <!-- Cursor集成 -->
                        <div class="ide-card">
                            <div class="ide-header">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="ide-logo">
                                    <rect width="24" height="24" rx="4" fill="#000000"/>
                                    <path d="M6 6h12v2H6V6zm0 4h12v2H6v-2zm0 4h8v2H6v-2z" fill="#ffffff"/>
                                    <circle cx="18" cy="16" r="2" fill="#00D4FF"/>
                                </svg>
                                <h4>Cursor</h4>
                            </div>
                            <p class="ide-description">AI原生代码编辑器，内置强大的AI助手，支持自然语言编程和智能代码生成，提供流畅的AI编程体验。</p>
                        </div>
                        
                        <!-- Windsurf集成 -->
                        <div class="ide-card">
                            <div class="ide-header">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="ide-logo">
                                    <defs>
                                        <linearGradient id="windsurfGradient" x1="0%" y1="0%" x2="100%" y2="100%">
                                            <stop offset="0%" style="stop-color:#00C9FF;stop-opacity:1" />
                                            <stop offset="100%" style="stop-color:#92FE9D;stop-opacity:1" />
                                        </linearGradient>
                                    </defs>
                                    <rect width="24" height="24" rx="4" fill="url(#windsurfGradient)"/>
                                    <path d="M8 6l8 6-8 6V6z" fill="white"/>
                                </svg>
                                <h4>Windsurf</h4>
                            </div>
                            <p class="ide-description">首个代理式IDE，配备Cascade AI助手，具备深度代码库理解能力和实时协作功能，重新定义AI编程体验。</p>
                        </div>
                        
                        <!-- Trae集成 -->
                        <div class="ide-card">
                            <div class="ide-header">
                                <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" class="ide-logo">
                                    <rect width="24" height="24" rx="4" fill="#FF6B35"/>
                                    <circle cx="12" cy="8" r="2" fill="white"/>
                                    <path d="M8 12h8v2H8v-2zm2 4h4v2h-4v-2z" fill="white"/>
                                    <path d="M6 18h12v2H6v-2z" fill="white" opacity="0.7"/>
                                </svg>
                                <h4>Trae AI</h4>
                            </div>
                            <p class="ide-description">自适应AI开发环境，通过智能代理自动化重复任务，提供对话式编程交互和实时代码优化建议。</p>
                        </div>
                        
                        <!-- JetBrains系列集成 -->
                        <div class="ide-card">
                            <div class="ide-header">
                                <img src="images/pycharm_logo.svg" alt="PyCharm" class="ide-logo">
                                <h4>JetBrains系列</h4>
                            </div>
                            <p class="ide-description">支持IntelliJ IDEA、PyCharm、WebStorm等全系列IDE，提供企业级AI开发工具集成和专业框架支持。</p>
                        </div>
                        <div class="ide-card">
                            <div class="ide-header">
                                <img src="images/github_copilot_logo.svg" alt="GitHub Copilot" class="ide-logo">
                                <h4>GitHub Copilot</h4>
                            </div>
                            <p class="ide-description">GitHub Copilot是由GitHub与OpenAI合作开发的一款革命性的智能代码补全和生成工具，旨在帮助开发人员更高效、更准确、更快地编写代码</p>
                        </div>
                    </div>
                </div>


            </div>
        </section>

        <!-- 实战动手 -->
        <section id="practical" class="section">
            <div class="container">
                <div class="section-header">
                    <h2>实战动手</h2>
                    <div class="section-divider"></div>
                </div>

                <!-- Spring-AI编写MCP工具 -->
                <div class="practical-block">
                    <h3 class="practical-title">Spring-AI编写MCP工具</h3>
                    <div class="practical-content">
                        <div class="practical-text">
                            <p>Spring AI框架提供了对MCP的原生支持，使Java开发者能够轻松集成和扩展MCP功能。以下是使用Spring AI创建自定义MCP工具的示例。</p>
                            <div class="steps-container">
                                <div class="step-item">
                                    <h4>步骤1: 创建mcp server项目</h4>
                                    <p>添加spring ai 及 mcp server相关依赖</p>
                                </div>
                                <div class="step-item">
                                    <h4>步骤2: 编写mcp工具</h4>
                                    <p>使用@MCP注解创建自定义工具类，定义工具的名称、参数和执行逻辑。</p>
                                </div>
                                <div class="step-item">
                                    <h4>步骤3: 创建cmp client项目</h4>
                                    <p>使用MCPClient发送请求并处理响应，将MCP工具集成到应用流程中。</p>
                                </div>
                                <div class="step-item">
                                    <h4>步骤4: 配置和使用</h4>
                                    <p>配置AI提供商和模型参数，在控制器或其他组件中注入并使用MCP服务。</p>
                                </div>
                            </div>
                        </div>
                        <div class="code-container">
                            <div class="code-header">
                                <div class="code-dots">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                                <div class="code-title">ChatController.java</div>
                            </div>
                            <pre class="code-block"><code class="language-java">
    @GetMapping(value = "/generate", produces = "text/event-stream")
    public Flux<String> generate(@RequestParam String message) {

        Message userMessage = new UserMessage(message);
        SystemPromptTemplate systemPromptTemplate = new SystemPromptTemplate(systemResource);
        Message systemMessage = systemPromptTemplate.createMessage();
        SimpleLoggerAdvisor loggerAdvisor = SimpleLoggerAdvisor.builder().build();
        MessageChatMemoryAdvisor chatMemoryAdvisor = MessageChatMemoryAdvisor.builder(chatMemory).build();

        return chatClient.prompt(new Prompt(List.of(userMessage, systemMessage)))
                .advisors(chatMemoryAdvisor, loggerAdvisor)
                .stream()
                .chatResponse()
                .mapNotNull(chatResponse -> chatResponse.getResult().getOutput().getText())
                .doOnComplete(() -> {
                    
                });
    }
                            </code></pre>
                        </div>
                    </div>
                </div>

                <div class="practical-block">
                    <h3 class="practical-title">拓展知识A2A</h3>
                    <p class="practical-intro"><a href="https://a2aproject.github.io/A2A/v0.2.5/">Agent2Agent</a> (A2A) 协议是由谷歌发起的开放标准，旨在实现不同 AI 代理系统之间的通信和互操作性。</p>

                    <div class="scenarios-grid">
                        <div class="scenario-card">
                            <h4>A2A 协议的重点</h4>
                            <ul class="scenario-list">
                                <li>代理发现</li>
                                <li>任务管理</li>
                                <li>多种内容类型</li>
                                <li>实时更新</li>
                            </ul>
                        </div>
                        <div class="scenario-card">
                            <h4>MCP 协议的重点</h4>
                            <ul class="scenario-list">
                                <li>工具调用</li>
                                <li>上下文增强</li>
                                <li>API 集成</li>
                                <li>数据检索</li>
                            </ul>
                        </div>
                    </div>

                    <div class="tips-box">
                        <div class="tips-header">
                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M13 10V3L4 14h7v7l9-11h-7z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                            </svg>
                            <h4>实用学习AI工具</h4>
                        </div>
                        <ul class="tips-list">
                            <li>和GPT一起学习  <a href="https://www.studywithgpt.com/zh-cn">Studywithgpt</a></li>
                            <li>AI驱动的快速学习代码库神器  <a href="https://deepwiki.com/">Deepwiki</a></li>
                            <li>一站式开源的模型即服务共享平台  <a href="https://www.modelscope.cn/home">ModelScope</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页脚 -->
    <footer>
        <div class="container">
            <p>© 2025 智能编译与MCP：重塑代码世界的革新引擎</p>
        </div>
    </footer>

    <!-- Lightbox Modal -->
    <div id="lightbox-modal" class="lightbox">
        <span class="close-lightbox">&times;</span>
        <div class="lightbox-controls">
            <button class="zoom-btn" id="zoom-in">+</button>
            <button class="zoom-btn" id="zoom-out">-</button>
            <button class="zoom-btn" id="zoom-reset">重置</button>
        </div>
        <div class="lightbox-image-container">
            <img class="lightbox-content" id="lightbox-image">
        </div>
    </div>

    <!-- 脚本 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-java.min.js"></script>
    <script src="script.js"></script>
</body>
</html>
